<template>
	<view class="app"> 
		<view class="order-info-top">
			<view class="order-info-top-left"> 
				<text class="order-info-status">{{orderStatusName[order.status] || ''}}</text>
				<text class="order-info-tips">感谢您使用逸合峰绿色驿站参与回收</text>
			</view>
			<view class="order-info-top-right">
				<i class="iconfont icon-huishou"></i> 
			</view>
		</view>
		<view class="order-address-info box-card" >
			<view class="order-address-info-top">
				<text class="order-card-title">预约上门</text>
				<text>预约时间：{{ order.book_time == 0?'尽快':order.book_time}}</text>
			</view>
			<view class="order-address-detail" > 
				<view class="order-address-detail-left"> 
					<i class="iconfont icon-shouhuodizhi"></i> 
				</view>
				<view class="order-address-detail-right">
					<view  >
						<text class="order-address-contact">{{order.address.name}}</text>
						<text class="phone-number" @click="phoneCall(order.address.mobile)">{{order.address.mobile}}</text>
					</view>
					<view style="color:#666">{{order.address.address}}</view>
				</view>
			</view>
		</view>
		<view class="order-info box-card" >
			<text class="order-card-title">订单信息</text>
			<view class="order-info-row">
				<label>回收类别：</label>
				<text>{{ order.book_category?order.book_category:'其他' }}</text>
			</view>
			<view class="order-info-row">
				<label>订单编号：</label>
				<text>{{ order.order_no }}</text>
			</view>
			<view class="order-info-row">
				<label>下单时间：</label>
				<text>{{ order.createtime }}</text>
			</view>
			<view class="order-info-row">
				<label>订单备注：</label>
				<text>{{ order.remarks?order.remarks:'无' }}</text>
			</view>
		</view>
		<view class="order-info box-card"  >
			<text class="order-card-title">预报信息</text>
			<view class="order-waste-list">
				<view class="order-waste-item">
					<text>合计</text>
					<text>￥{{order.order_price}}</text>
				</view>
				<view class="order-waste-item" style="flex-direction: column;justify-content: flex-start;align-items: flex-start;">
					<u-upload  width="160rpx" height="160rpx" :show-progress="false" :deletable="false" :custom-btn="true"  :file-list="fileList" ></u-upload>
				</view>
			</view>
		</view>
		
		
		<view style="height: 100rpx;"></view>
		<view class="order-info-bottom-btn" v-if="order.id && [-1,2].indexOf(order.status) < 0">
			<view  class="order-info-bottom-row ">
				<u-button style="margin-right: 10rpx;" class="recycler-btn" plain size="medium" type="primary" v-if="order.status == 1"  @click="gotoRecycler" >开始回收</u-button>
				<u-button style="margin-left: 10rpx;" class="recycler-btn"  plain size="medium" type="error" v-if="order.status == 1"  @click="cancelOrder"> 取消接单</u-button>
			</view>
			<c-safe-bottom></c-safe-bottom>
		</view>
	</view>
</template>
<style scoped>  
	.order-info-top{background-color: #19be6b;color:white;display: flex;align-items: center;padding:30rpx 30rpx 60rpx 30rpx;}
	.order-info-top-left{ display: flex;flex-direction: column;flex:1;}
	.order-info-status{font-size: 50rpx;}
	.icon-huishou{font-size: 100rpx;}
	.order-address-info{margin-top:-34rpx;}
	.order-address-info-top{display: flex;align-items: center;justify-content: space-between;}
	.order-card-title{ font-size: 34rpx;font-weight: bold;color:#333;}
	.order-address-detail{margin-top:30rpx;display: flex;align-items: center; }
	.order-address-detail-left{ margin-right:10rpx;}
	.icon-shouhuodizhi{ font-size: 80rpx;}
	.order-address-detail-right{}
	.order-info{font-size: 30rpx;}
	.order-address-contact{color:#333;font-size: 30rpx;font-weight: bold;margin-right: 20rpx;}
	.order-info-row{margin-top:20rpx;color:#666}
	.order-waste-list{margin-top: 20rpx;}
	.order-waste-item{ padding:10rpx 0;display: flex;align-items: center;justify-content: space-between;}
	.order-info-bottom-btn{background-color: white;position: fixed;bottom:0;width: 100%;padding:20rpx 20rpx 0 20rpx;text-align: center;}
	.order-info-bottom-row{display: flex;align-items: center;justify-content: space-around;}
	/deep/ .recycler-btn{display: block !important;width: 90% !important;}
	/deep/ .recycler-btn .u-btn{ width: 90% !important;}
	.phone-number{color:blue;text-decoration: underline;}
</style>
<script>  
	export default {
		data() {
			return {
				order:{
					
				},
				orderStatusName:{
					'0':'待接单','1':'已接单','2':'已完成','-1':'已取消',
				},
				fileList:[],
				recycler:0
			}
		}, 
		computed:{
			// bookPrice(){
			// 	if(!this.order.order_price){
			// 		return 0
			// 	}
			// 	let temp = 0
			// 	this.order.orderBookInfo.forEach(item => {
			// 		temp += (item.estimate * item.wastePrice) 
			// 	})
			// 	return temp.toFixed(2)
			// }
		},
		methods:{
			phoneCall(number){ 
				uni.makePhoneCall({
				   phoneNumber: number
				})
			},
			getOrderInfo(orderId){
				this.$u.api[this.recycler?'recycler':'order'].getOrderInfo({id:orderId}).then(res => {
					if(res.code != 1){
						this.$u.toast(res.msg)
						setTimeout(function(){
							uni.navigateBack();
						},1000)
						return false
					}
					let date = new Date(res.data.createtime* 1000);
					let year = date.getFullYear();
					let month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以需要+1
					let day = ("0" + date.getDate()).slice(-2);
					let hours = ("0" + date.getHours()).slice(-2);
					let minutes = ("0" + date.getMinutes()).slice(-2);
					 let seconds = ("0" + date.getSeconds()).slice(-2);
					res.data.createtime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
					this.order = res.data
					if(this.order?.book_photo){
						this.order.book_photo = this.order.book_photo.split(',');
						this.order.book_photo.forEach(item => {
							this.fileList.push({url:item})
						})
					}
				})
			},
			gotoOrderForm(){
				uni.navigateTo({
					url:"/pageA/order/form?orderId=" + this.order.id
				})
			},
			gotoRecycler(){
				uni.navigateTo({
					url:"/pageA/recycler/form?orderId=" + this.order.id
				})
			},
			cancelOrder(){
				let _this = this
				uni.showModal({
					title: '提示',
					content: '每月最多可取消5次，确定取消？',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					showCancel: true, // 是否显示取消按钮，默认为 true
					confirmColor: '#f55850',
					cancelColor: '#39B54A',
					success: (res) => {
					if(res.confirm) {  
						this.$u.api.recycler.cancelOrder({order_id:this.order.id}).then(res => {
							if(res.code == 1){
								uni.showToast({
								    title: '取消成功！',
								    icon: 'success'
								})
								setTimeout(function(){
									uni.navigateBack();
								},1000)
							}else{
								uni.showToast({
								    title: res.msg,
								    icon: 'error'
								})
							}
						}).catch(req =>{
							uni.showToast({
							    title: '取消失败！',
							    icon: 'error'
							})
						})
						
					} else {  
						}  
					} 
				})
				
			}
		},
		onLoad(option){
			if(!option?.orderId){
				uni.navigateBack()
			} 
			if(option?.recycler){
				this.recycler = option.recycler 
			}    
			this.getOrderInfo(option.orderId) 
		},
		onReady() { 
			let _this = this
			uni.$on('orderInfoUpdate', function(data) { 
				_this.getOrderInfo(_this.order.orderId) 
			}) 
		},
		onUnload() { 
			uni.$off('orderInfoUpdate') 
		}
	}
</script>